import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableNativeFeedback,
} from 'react-native';

/** 涟漪效果(Borderless/无界)按钮 */
export default class RippleButtonBorderless extends Component {
    constructor(props){
        super();
        this.state={
            disabled : props.disabled,
        }
    }

    render() {
        return (
            <TouchableNativeFeedback
                style={this.state.disabled ? styles.TouchDisable : styles.TouchEnable}
                background={TouchableNativeFeedback.SelectableBackgroundBorderless()}
                onPress={() => this.props.onPress()}
                disabled={this.state.disabled}>
                <View>
                    <Text style={[this.state.disabled ? styles.TextDisable : styles.TextEnable, this.props.style]}>{this.props.title}</Text>
                </View>
            </TouchableNativeFeedback>
        );
    }

    /** 设置是否可点击 */
    setDisable(isDisabled:boolean){
        this.setState({disabled : isDisabled})
    }
}

const styles = StyleSheet.create({
    TouchEnable:{
        paddingTop:2,
        paddingBottom:2,
        paddingLeft:4,
        paddingRight:4,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },
    TouchDisable:{
        paddingTop:2,
        paddingBottom:2,
        paddingLeft:4,
        paddingRight:4,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },
    TextEnable:{
        color:'#21ff11'
    },
    TextDisable:{
        color:'#a5a5a5'
    },
});

